<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <title>小哲物联云</title>
  </head>
  <body>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script>
        const DeviceOption = {
            title: {
                text: '最近一小时'
            },
            xAxis: {
                type: 'time',
                splitLine: {
                show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                show: false
                }
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    showSymbol: false,
                    data: [],
                    smooth: true
                }
            ]
        };

        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "H+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        window.gloUpdateEvent=[];
        setInterval(
            function(){
                for(let i=0;i<window.gloUpdateEvent.length;++i)
                {
                    window.gloUpdateEvent[i].updateFunc();
                }
            },1000
        )

    </script>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">小哲物联云</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">仪表盘</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">设备列表</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md">
                <div class="m-auto" id="grapCPU" style="width: 350px;height:350px;"></div>
                <script>
                    function makeSystemPanel(element,panelTitle)
                    {
                        this.chartDom=element;
                        this.deviceChart=echarts.init(this.chartDom);
                        this.deviceOption={
                            title: {
                                text: "CPU",
                                left: "center",
                                top: "top",
                                textStyle: {
                                fontSize: 30
                                }
                            },
                            series: [
                                {
                                type: 'gauge',
                                progress: {
                                    show: true,
                                    width: 18
                                },
                                axisLine: {
                                    lineStyle: {
                                    width: 18
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    length: 15,
                                    lineStyle: {
                                    width: 2,
                                    color: '#999'
                                    }
                                },
                                axisLabel: {
                                    distance: 25,
                                    color: '#999',
                                    fontSize: 15
                                },
                                anchor: {
                                    show: true,
                                    showAbove: true,
                                    size: 25,
                                    itemStyle: {
                                    borderWidth: 10
                                    }
                                },
                                title: {
                                    show: false
                                },
                                detail: {
                                    valueAnimation: true,
                                    fontSize: 60,
                                    offsetCenter: [0, '70%']
                                },
                                data: [
                                    {
                                    value: Math.round(Math.random()*50)
                                    }
                                ]
                                }
                            ]
                        };
                        this.deviceOption.title.text=panelTitle;
                        this.updateFunc=function() {
                            this.deviceChart.setOption({
                                series:[{data:[{value: Math.round(Math.random()*10)}]}]
                            })
                        }
                        this.deviceChart.setOption(this.deviceOption);
                    }
                    window.gloUpdateEvent.push(new makeSystemPanel(document.getElementById("grapCPU"),"CPU"));
                </script>
            </div>
            <div class="col-md">
                <div class="m-auto" id="grapRAM" style="width: 350px;height:350px;"></div>
                <script>
                    var chartDom = document.getElementById('grapRAM');
                    var myChart = echarts.init(chartDom);
                    var option;
        
                    option = {
                    title: {
                        text: "RAM",
                        left: "center",
                        top: "top",
                        textStyle: {
                        fontSize: 30
                        }
                    },
                    series: [
                        {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                            width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                            width: 2,
                            color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 25,
                            color: '#999',
                            fontSize: 15
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                            borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 60,
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 50
                            }
                        ]
                        }
                    ]
                    };
        
                    option && myChart.setOption(option);
                </script>        
            </div>
            <div class="col-md">
                <div class="m-auto" id="grapDisk" style="width: 350px;height:350px;"></div>
                <script>
                    var chartDom = document.getElementById('grapDisk');
                    var myChart = echarts.init(chartDom);
                    var option;
        
                    option = {
                        title: {
                            text: "Disk",
                            left: "center",
                            top: "top",
                            textStyle: {
                            fontSize: 30
                            }
                        },
                    series: [
                        {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                            width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                            width: 2,
                            color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 25,
                            color: '#999',
                            fontSize: 15
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                            borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 60,
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                            value: 40
                            }
                        ]
                        }
                    ]
                    };
        
                    option && myChart.setOption(option);
                </script>
            </div>
        </div>
        <div class="row justify-content-md-center">
            <div class="col-md">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">系统概览</h5>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td>系统类型</td>
                                        <td>openSUSE</td>
                                    </tr>
                                    <tr>
                                        <td>平台版本</td>
                                        <td>1.0</td>
                                    </tr>
                                    <tr>
                                        <td>内核版本</td>
                                        <td>5.10.104-linuxkit</td>
                                    </tr>
                                    <tr>
                                        <td>运行时间</td>
                                        <td>08:55:47</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">平台概览</h5>
                        <div class="card-body">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td>已上报数据</td>
                                        <td>512条</td>
                                    </tr>
                                    <tr>
                                        <td>注册设备</td>
                                        <td>6台</td>
                                    </tr>
                                    <tr>
                                        <td>设备类型</td>
                                        <td>5种</td>
                                    </tr>
                                    <tr>
                                        <td>最后一次上报</td>
                                        <td>2022-6-27 16:59</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <h1 class="text-center">实时数据</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md">
                <div class="card">
                    <h2 class="card-header">测试设备1</h2>
                    <div class="card-body">
                        <div class="m-auto" id="device1-1" style="height:250px;"></div>
                        <button type="button" class="btn btn-primary">历史数据</button>
                        <script>
                            function makeRealtimeDevice(element,DeviceTitle)
                            {
                                this.chartDom=element;
                                this.deviceChart=echarts.init(this.chartDom);
                                this.deviceData=[];
                                this.deviceNow = new Date();

                                this.randomData=function(){
                                    this.deviceNow=new Date(+this.deviceNow + 60*1000);
                                    let deviceValue=Math.random()*5 + 50;
                                    return {
                                        name: this.deviceNow.toString(),
                                        value: [
                                            this.deviceNow.Format("yyyy-MM-dd HH:mm:ss"),
                                            deviceValue
                                        ]
                                    }
                                }

                                for (var i = 0; i < 60; i++) {
                                    this.deviceData.push(this.randomData());
                                }
                                this.deviceOption={
                                    title: {
                                        text: '最近一小时'
                                    },
                                    xAxis: {
                                        type: 'time',
                                        splitLine: {
                                        show: false
                                        }
                                    },
                                    yAxis: {
                                        type: 'value',
                                        boundaryGap: [0, '100%'],
                                        splitLine: {
                                        show: false
                                        }
                                    },
                                    series: [
                                        {
                                            name: 'Fake Data',
                                            type: 'line',
                                            showSymbol: false,
                                            data: [],
                                            smooth: true
                                        }
                                    ]
                                };
                                this.deviceOption.title.text=DeviceTitle;
                                this.deviceOption.series[0].data=this.deviceData;
                                this.deviceChart.setOption(this.deviceOption);
                                
                                this.updateFunc=function() {
                                    this.deviceData.shift();
                                    this.deviceData.push(this.randomData());
                                    this.deviceChart.setOption({
                                        series: [{
                                            data: this.deviceData
                                        }]
                                    });
                                }
                            }
                            window.gloUpdateEvent.push(new makeRealtimeDevice(document.getElementById('device1-1'),'测试值1'));
                        </script>
                    </div>
                </div>
            </div>
            <div class="col-md">
                <div class="card">
                    <h2 class="card-header">测试设备2</h2>
                    <div class="card-body">
                        <div class="m-auto" id="device2-1" style="height:250px;"></div>
                        <div class="m-auto" id="device2-2" style="height:250px;"></div>
                        <button type="button" class="btn btn-primary">历史数据</button>
                        <button id="device2Btn-start" type="button" class="btn btn-danger">启动</button>
                        <button id="device2Btn-stop" type="button" class="btn btn-success">停止</button>

                        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                            <div id="device2Toast-start" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="toast-header">
                                    <strong class="me-auto">控制消息</strong>
                                    <small>1 mins ago</small>
                                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                </div>
                                <div class="toast-body">
                                    测试设备2已启动
                                </div>
                            </div>
                        </div>
                        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                            <div id="device2Toast-stop" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="toast-header">
                                    <strong class="me-auto">控制消息</strong>
                                    <small>1 mins ago</small>
                                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                </div>
                                <div class="toast-body">
                                    测试设备2已停止
                                </div>
                            </div>
                        </div>
                        <script>
                            function setBtnToast(Btn,Toast)
                            {
                                if (Btn) {
                                    Btn.addEventListener('click', function () {
                                        var toast = new bootstrap.Toast(Toast)
                                        toast.show()
                                    })
                                }
                            }
                            setBtnToast(document.getElementById("device2Btn-start"),document.getElementById("device2Toast-start"));
                            setBtnToast(document.getElementById("device2Btn-stop"),document.getElementById("device2Toast-stop"));
                            window.gloUpdateEvent.push(new makeRealtimeDevice(document.getElementById('device2-1'),'温度'));
                            window.gloUpdateEvent.push(new makeRealtimeDevice(document.getElementById('device2-2'),'引擎转速'));
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>